<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
    <!-- 导入vue-router-3.0.1.js包后 url地址最后自动多出#/ (hash路由) -->
    <!-- 1.安装 vue-router 路由模块 -->
    <script src="./lib/vue-router-3.0.1.js"></script>
    <style>
      .router-link-active,
      .myactive {
        color: red;
        font-weight: bold;
        font-style: italic;
        font-size: 80px;
        text-decoration: underline;
        background-color: green;
      }

      .my-enter,
      .my-leave-to {
        opacity: 0;
        transform: translateX(180px);
      }

      .my-enter-active,
      .my-leave-active {
        transition: all 0.8s ease;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <!-- <a href="#/login">登录</a>
        <a href="#/register">注册</a> -->

      <!-- vue-router官方提供的标签router-link 默认渲染为a标签 使用tag不管渲染为什么标签vue-router内部都会给router绑定点击触发事件实现路由切换 -->
      <router-link to="/login" tag="span">登录</router-link>
      <router-link to="/register">注册</router-link>
      <!-- 这是 vue-router 提供的元素，专门用来 当作占位符的，将来，路由规则，匹配到的组件，就会展示到
        这个 router-view 中去
        -->
      <!-- 所以： 我们可以把 router-view 认为是一个占位符
            用法跟vue提供的<component :is="组件名称"></component>表签类似 -->
      <transition name="my" mode="out-in">
        <router-view></router-view>
      </transition>
    </div>

    <script>
      // 组件的模版对象(这里用作路由组件)
      var login = {
        template: "<h1>登录组件</h1>"
      };
      var register = {
        template: "<h1>注册组件</h1>"
      };

      // 组件的引用名称必须是在html页面 尖括号形式引用
      // Vue.component('login', {
      //     template: '<h1>登录组件</h1>'
      // })

      // 2. 创建一个全局的路由对象，当导入 vue-router 包之后，
      // 在 window 全局对象中就有了一个 路由的构造函数
      // 叫做 VueRouter
      // 在 new 路由对象的时候，可以为 构造函数，传递一个配置对象
      var routerObj = new VueRouter({
        routes: [
          // 保存所有路由匹配规则(类比node中监听路由事件)  routes 路线的意思
          // 每个路由规则，都是一个对象，这个规则对象身上，有两个必须的属性：
          // 属性1 是 path，表示要监听 那个路由链接地址；
          // 属性2 是 component, 表示，如果 路由是前面匹配到的 path ，则展示 component 属性对应
          // 的那个组件

          // 匹配的是url地址里面的hash(#)后面跟的是/login 展示对应component指定的组件

          // 注意： component 的属性值，必须是一个 组件的模版对象，不能是 组件的引用名称
          // { path: '/', component: login },
          { path: "/", redirect: "login" }, // 这里的 redirect 和 Node 中的 redirect 完全是两码事 Node 的是302重定向 会发起请求重新刷新页面
          { path: "/login", component: login },
          { path: "/register", component: register }
        ],
        // 修改vue-router为router-link标签提供的默认类router-link-active 方便以后使用bootstrap提供的类
        linkActiveClass: "myactive"
      });

      var vm = new Vue({
        el: "#app",
        data: {},
        methods: {},
        // 注册为私有路由(必须从这里开始)  让子孙三代组件 路由链接有效  vm -> 儿子 -> 孙子
        // 子孙代随意一代使用 <router-view></router-view>都有效
        // 第四代使用 <router-view></router-view> 对前三代有效 自己无效
        router: routerObj //将路由规则对象，注册到 vm 实例上，用来监听 URL 地址的变化，
        // 然后展示对应的组件
      });
    </script>
  </body>
</html>
